        <!DOCTYPE html>
        <html lang="zh-CN">

        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport"
                content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
            <title>乐谱生成器</title>

            <link rel="shortcut icon" href="img/musical.ico">
            <link rel="stylesheet" href="css/reset.css">
            <script>
                document.write(`<link rel="stylesheet" href="css/musical2.0.css?v=${Math.random()}">`)
            </script>
            
        </head>

        <body>
            <div class="container">
                <aside class="aside">
                    <ul>
                        <li><a href="explanation.html#musical">使用指南</a></li>
                        <!-- <li><a id="setConfig">乐谱配置</a></li> -->
                    </ul>
                </aside>
                <header class="header">
                    <h2 class="title">乐谱生成器</h2>
                </header>

                <div class="main">
                    <div class="notes"></div>
                </div>

                <footer class="footer">
                    <div class="keys">
                        <div class="key-group note-key-group">
                            <!-- 音符按钮 -->
                            <div class="key note-key" data-key="key-whole">
                                <div class="key-desc">
                                    <p>♩---</p>
                                    <p>全音符</p>
                                </div>
                            </div>
                            <div class="key note-key" data-key="key-2">
                                <div class="key-desc">
                                    <p>♩-</p>
                                    <p>二分音符</p>
                                </div>
                            </div>
                            <div class="key note-key" data-key="key-4">
                                <div class="key-desc">
                                    <p>♩四分</p>
                                    <p>音符</p>
                                </div>
                            </div>
                            <!-- 低1~5 -->
                            <div class="key piano-key" data-key="1">
                                <!-- <div class="key-desc single-line key-tips">Q</div> -->
                                <div class="key-rhombus-circle key-rotate-animation rotate-original"></div>
                                <div class="key-title key-bass">1</div>
                            </div>
                            <div class="key piano-key" data-key="2">
                                <div class="key-title key-bass">2</div>
                                <div class="key-rhombus key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="3">
                                <div class="key-title key-bass">3</div>
                                <div class="key-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="4">
                                <div class="key-title key-bass">4</div>
                                <div class="key-rhombus key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="5">
                                <div class="key-title key-bass">5</div>
                                <div class="key-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <!-- 操作按钮 -->
                            <div class="key operation-key" data-key="key-add">
                                <div class="key-desc single-line">增加</div>
                            </div>
                            <div class="key operation-key" data-key="key-del">
                                <div class="key-desc single-line">删除</div>
                            </div>
                        </div>

                        <div class="key-group piano-key-group">
                            <!-- 音符按钮 -->
                            <div class="key note-key" data-key="key-8">
                                <div class="key-desc">
                                    <p>♪八分</p>
                                    <p>&nbsp;音符&nbsp;</p>
                                </div>
                            </div>
                            <div class="key note-key" data-key="key-16">
                                <div class="key-desc">
                                    <p>♬十六</p>
                                    <p>分音符</p>
                                </div>
                            </div>
                            <div class="key note-key" data-key="key-32">
                                <div class="key-desc">
                                    <p>三十二</p>
                                    <p>分音符</p>
                                </div>
                            </div>
                            <!-- 低6、7，中1~3 -->
                            <div class="key piano-key" data-key="6">
                                <div class="key-title key-bass">6</div>
                                <div class="key-rhombus key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="7">
                                <div class="key-title key-bass">7</div>
                                <div class="key-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="11">
                                <div class="key-desc single-line key-alto">1</div>
                                <div class="key-rhombus-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="12">
                                <div class="key-desc single-line key-alto">2</div>
                                <div class="key-rhombus key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="13">
                                <div class="key-desc single-line key-alto">3</div>
                                <div class="key-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <!-- 操作按钮 -->
                            <div class="key operation-key" data-key="key-pre">
                                <div class="key-desc single-line">上一个</div>
                            </div>
                            <div class="key operation-key" data-key="key-next">
                                <div class="key-desc single-line">下一个</div>
                            </div>
                        </div>

                        <div class="key-group operation-key-group">
                            <!-- 音符按钮 -->
                            <div class="key note-key" data-key="key-dot">
                                <div class="key-desc">
                                    <p>&nbsp;附点&nbsp;</p>
                                    <p>&nbsp;音符&nbsp;</p>
                                </div>
                            </div>
                            <div class="key note-key" data-key="key-triplet">
                                <div class="key-desc single-line">三连音</div>
                            </div>
                            <div class="key note-key" data-key="key-0">
                                <div class="key-desc single-line">休止符</div>
                            </div>
                            <!-- 中4~7，高1 -->
                            <div class="key piano-key" data-key="14">
                                <div class="key-desc single-line key-alto">4</div>
                                <div class="key-rhombus key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="15">
                                <div class="key-desc single-line key-alto">5</div>
                                <div class="key-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="16">
                                <div class="key-desc single-line key-alto">6</div>
                                <div class="key-rhombus key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="17">
                                <div class="key-desc single-line key-alto">7</div>
                                <div class="key-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <div class="key piano-key" data-key="21">
                                <div class="key-title key-high">1</div>
                                <div class="key-rhombus-circle key-rotate-animation rotate-original"></div>
                            </div>
                            <!-- 操作按钮 -->
                            <div class="key operation-key" data-key="key-finish">
                                <div class="key-desc single-line">完成</div>
                            </div>
                            <div class="key operation-key" data-key="key-play">
                                <div class="key-desc single-line">播放</div>
                            </div>
                        </div>
                    </div>
                </footer>

                <textarea name="textarea" class="note-textarea" id="text"></textarea>
            </div>

            <script src="js/jquery.js"></script>
            <script>
                document.write(`<script src="js/musical2.0.js?v=${Math.random()}"><\/script>`)
            </script>
            
        </body>

        </html>